<template>
  <div class="container">
    <el-form class="form" ref="form" :model="sizeForm" label-width="80px" size="mini">
      <!-- <el-form-item label="昵称">
          <p>{{ sizeForm.nickname }}</p>
        </el-form-item> -->
      <el-form-item label="修改头像" class="avatar-uploader-container">
        <div class="about">
          <el-upload
              ref="upload"
              class="avatar-uploader"
              list-type="picture-card"
              action="#"
              :limit="1"
              :auto-upload="false"
              :on-change="onChangeFile"
              :http-request="uploadHttpRequest"
              :before-upload="beforeAvatarUpload"
          >
            <!--            <img v-if="imageUrl" :src="imageUrl" class="avatar"/>-->
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="uploadData.nickName"></el-input>
      </el-form-item>
      <el-form-item label="个性签名">
        <el-input type="textarea" :rows="2" placeholder="" v-model="uploadData.userIntro"></el-input>
      </el-form-item>
      <el-form-item label="学校">
        <el-input v-model="uploadData.userSchool"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="uploadData.userSchoolId"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio v-model="uploadData.sex" label="男">男</el-radio>
        <el-radio v-model="uploadData.sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="政治地位">
        <el-input v-model="uploadData.userStatus"></el-input>
      </el-form-item>
      <el-form-item label="民族">
        <el-input v-model="uploadData.userNation"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="phone"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="uploadData.realName"></el-input>
      </el-form-item>
      <!-- 		<el-form-item label="证件类型"><el-input v-model="sizeForm.id_type"></el-input></el-form-item> -->
      <el-form-item label="证件号码">
        <el-input v-model="uploadData.userNumber"></el-input>
      </el-form-item>
      <el-form-item label="联系邮箱">
        <el-input v-model="uploadData.email"></el-input>
      </el-form-item>

      <el-button class="chuangjian" type="primary" @click="submitUpload">立即修改</el-button>
    </el-form>
  </div>
</template>
<!--            :file-list="fileList"
            :on-change="onChangeFile"
            :on-remove="onRemoveFile"
            :multiple="true"-->
<script>
import {request} from '../api/axios.js';
import axios from 'axios';

export default {
  name: 'mymessage',
  data() {
    return {
      phone: '',
      imageUrl: '',
      file: {},
      /*fileList: [],
      upFileList: [],*/
      uploadData: {
        // userName: '2904933393',
        // realName: '白郑鑫',
        // nickName: '2904933393',
        // email: '2904933393@qq.com',
        // sex: '男',
        // userNation: '汉族',
        // userNumber: '610423200106141319',
        // userStatus: '共青团员',
        // userSchool: '西安理工大学',
        // userSchoolId: '3190932002',
        // qqNumber: '2904933393',
        // userOccupation: '学生',
        // userEduBackground: '本科',
        // userIntro: '我是一名十四运篮球场馆志愿者'
        userName: '',
        realName: '',
        nickName: '',
        email: '',
        sex: '',
        userNation: '',
        userNumber: '',
        userStatus: '',
        userSchool: '',
        userSchoolId: '',
        qqNumber: '',
        userOccupation: '',
        userEduBackground: '',
        userIntro: '',
        isNull: true
      },
      sizeForm: {
        // myimag: 'http://8.136.157.194:5000/media/',
        // personal_profile: '',
        // school_id: '',
        // school: '',
        // gender: '',
        // political_affiliation: '',
        // nickname: '',
        // nation: '',
        // phone: '',
        // realname: '',
        // id_num: '',
        // id_type: '',
        // email: ''
        avatar: '',
        create_time: '',
        email: '',
        id: 0,
        is_management: false,
        nick_name: '',
        phone: '',
        qq_number: '',
        real_name: '',
        sex: '',
        user_edu_background: '',
        user_intro: '',
        user_name: '',
        user_nation: '',
        user_number: '',
        user_occupation: '',
        user_school: '',
        user_school_id: '',
        user_status: ''
      }
    };
  },
  created() {
    this.mymessage();
  },
  methods: {
    // mymessage() {
    // 	let authorization = localStorage.getItem('token');
    // 	request({
    // 		url: '/v1/users/白郑鑫',
    // 		method: 'get',
    // 		headers: {
    // 			'Content-Type': 'multipart/form-data',
    // 			authorization
    // 		}
    // 	}).then(res => {
    // 		console.log(res.data.data);
    // 		this.sizeForm.personal_profile = res.data.data.个人简介;
    // 		this.sizeForm.myimag += res.data.data.头像;
    // 		this.sizeForm.school_id = res.data.data.学号;
    // 		this.sizeForm.school = res.data.data.学校;
    // 		this.sizeForm.gender = res.data.data.性别;
    // 		this.sizeForm.political_affiliation = res.data.data.政治面貌;
    // 		this.sizeForm.nickname = res.data.data.昵称;
    // 		this.sizeForm.nation = res.data.data.民族;
    // 		this.sizeForm.phone = res.data.data.电话;
    // 		this.sizeForm.realname = res.data.data.真实姓名;
    // 		this.sizeForm.id_num = res.data.data.证件号码;
    // 		this.sizeForm.id_type = res.data.data.证件类型;
    // 		this.sizeForm.email = res.data.data.邮箱;
    // 		console.log(this.sizeForm.myimag);
    // 	});
    // },
    mymessage() {
      setTimeout(() => {
        request({
          url: '/v1/users/getinfo',
          method: 'post',
          data: {
            userName: this.$store.state.userInfo.userName
          }
        }).then(res => {
          this.sizeForm = res.data.data;
          this.$store.state.userdetail = res.data.data;
          this.imageUrl = res.data.data.avatar;
          this.uploadData.userName = res.data.data.user_name;
          this.uploadData.nickName = res.data.data.nick_name;
          this.uploadData.realName = res.data.data.real_name;
          this.uploadData.email = res.data.data.email;
          this.uploadData.sex = res.data.data.sex;
          this.uploadData.userNation = res.data.data.user_nation;
          this.uploadData.userNumber = res.data.data.user_number;
          this.uploadData.userStatus = res.data.data.user_status;
          this.uploadData.userSchool = res.data.data.user_school;
          this.uploadData.userSchoolId = res.data.data.user_school_id;
          this.uploadData.qqNumber = res.data.data.qq_number;
          this.uploadData.userOccupation = res.data.data.user_occupation;
          this.uploadData.userEduBackground = res.data.data.user_edu_background;
          this.uploadData.userIntro = res.data.data.user_intro;
          this.phone = res.data.data.phone;
          //upload
          // userName: '',
          // realName: '',
          // nickName: '',
          // email: '',
          // sex: '',
          // userNation: '',
          // userNumber: '',
          // userStatus: '',
          // userSchool: '',
          // userSchoolId: '',
          // qqNumber: '',
          // userOccupation: '',
          // userEduBackground: '',
          // userIntro: ''

          //res
          // avatar: "userAvatar/2021-11-16_165658.175493__13991044970.jpg"
          // create_time: "2021-11-18T16:13:52.148"
          // email: "29664933395@qq.com"
          // id: 21
          // is_management: true
          // nick_name: "一位光荣的志愿者"
          // phone: "13718470799"
          // qq_number: "2904933393"
          // real_name: "白郑鑫"
          // sex: "男"
          // user_edu_background: ""
          // user_intro: "请介绍一下你自己吧"
          // user_name: "白郑鑫"
          // user_nation: "汉"
          // user_number: "610423200106141319"
          // user_occupation: ""
          // user_school: "西安理工大学"
          // user_school_id: "3190932002"
          // user_status: "团员"
        });
      }, 600);

      // let authorization = localStorage.getItem('token');
      // request({
      // 	url: '/v1/users/魏美峰',
      // 	method: 'get',
      // 	headers: {
      // 		'Content-Type': 'multipart/form-data',
      // 		authorization
      // 	}
      // }).then(res => {
      // 	console.log(res.data.data);
      // 	this.myimag += res.data.data.头像;
      // 	this.realname = res.data.data.真实姓名;
      // 	console.log(this.myimag);
      // });
      // request({
      // 	url: '/v1/users/getinfo',
      // 	method: 'post',
      // 	data: {
      // 		userName:  this.$store.state.userInfo.userName
      // 	}
      // }).then(res => {
      // 	console.log(res.data.data);
      // });
    },
    // 上传文件及其附带参数
    uploadHttpRequest() {
      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append('avatar', this.file); //添加文件对象
      formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式
      // let uploadUrl = 'https://paas-edu.bktencent.com/o/bai-volunteer/v1/users/modifyinfo'; //上传地址
      let uploadUrl = 'http://localhost:8000/v1/users/modifyinfo';
      axios.post(uploadUrl, formData).then(res => {
        console.log(res);
        if (res.data.code === 200){
          this.mymessage();
          this.$store.state.userInfo.avatar = res.data.avatar
          alert('修改成功！');
        }
      });
    },
    // 触发上传文件函数
    submitUpload() {
      this.uploadHttpRequest();
    },
    // 上传之前的判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    // 改变文件时
    onChangeFile(file) {
      this.uploadData.isNull = false
      this.file = file.raw
    },
    /*// 改变文件时
    onChangeFile(file, fileList) {
      this.upFileList = []
      for (let x of fileList) {
        if (x.raw) {
          this.upFileList.push(x.raw)
        }
      }
      console.log(this.upFileList);
    },
    // 移除文件
    onRemoveFile(file, fileList) {
      this.upFileList = []
      for (let x of fileList) {
        if (x.raw) {
          this.upFileList.push(x.raw)
        }
      }
    },*/
  }
};
</script>

<style scoped>
.form {
  width: 70%;
  display: flex;
  flex-direction: column;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.tixing {
  color: #262626;
}

.chuangjian {
  margin: auto;
  width: 10rem;
}

.about {
  align-items: center;
  margin: auto;
}
</style>
